import '../styles/right.scss'
import { connect } from 'react-redux';
import { memo } from 'react'
import RenderForm from '../boxs/renderForm'
import * as Actions from '../../redux/Actions'

const Right = memo((props: any) => {
  const boxVals = props.currentBoxVal
  const onSave = (config: object, vals: any) => {
    vals.config = config
    props.resetItemsVal(vals)
  }

  return <div className="right">
    <RenderForm boxVals={boxVals} onSave={onSave} />
  </div>
})

function mapStateToProps(state: any, ownProps: any) {
  return {
    currentBoxVal: state.currentBoxVal
  }
}

function mapDispatchToProps(dispatch: any, ownProps: any) {
  return {
    resetItemsVal: (data: any) => {
      dispatch(Actions.resetItemsVal(data))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Right)